<template>
  <div class="page-container">
    <div class="tool-container">
      <el-form class="tool-search" :model="queryParams" ref="queryFormRef" :inline="true">
        <el-form-item prop="regionCode">
          <RegionSelect v-model="queryParams.regionCode" placeholder="行政区域" clearable />
        </el-form-item>
        <el-form-item prop="status">
          <DictSelect dict="maintenance_bill_status" v-model="queryParams.status" placeholder="状态" clearable />
        </el-form-item>
        <el-form-item prop="type">
          <DictSelect dict="maintenance_bill_type" v-model="queryParams.type" placeholder="工单类型" clearable />
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="times" type="datetimerange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" format="YYYY/MM/DD hh:mm:ss" value-format="YYYY/MM/DD hh:mm:ss" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="tool-handle">
        <el-dropdown split-button type="primary" @command="handleAdd">
          <el-icon class="mg-r-4">
            <Plus />
          </el-icon>生成工单
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="1">维修工单</el-dropdown-item>
              <el-dropdown-item command="2">巡检工单</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="tabel-container">
      <vxe-grid ref="tableRef" v-bind="gridOptions">
        <template #status="{ row }">
          <dict-tag :options="maintenance_bill_status" :value="row.status" />
        </template>
        <template #type="{ row }">
          <dict-tag :options="maintenance_bill_type" :value="row.type" />
        </template>
        <template #handle="{ row }">
          <el-button link type="primary" @click="handleDetail(row)"
            v-hasPermi="['biz:maintenance:query']">详情</el-button>
          <el-button link type="primary" @click="handleDispose(row)"
            v-hasPermi="['biz:maintenance:edit']">处理</el-button>
          <el-button link type="danger" @click="handleClose(row)" v-hasPermi="['biz:maintenance:remove']">关闭</el-button>
        </template>
        <template #bottom>
          <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />
        </template>
      </vxe-grid>
    </div>
  </div>
</template>

<script setup name="StationMaintenance" lang="ts">

import { listMaintenance, start, finish } from '@/api/station/maintenance/index';
import { BizStationMaintenanceVo } from '@/api/station/maintenance/types';
import { getTableConfig } from './columns';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { maintenance_bill_status, maintenance_bill_type } = toRefs<any>(proxy?.useDict('maintenance_bill_status', 'maintenance_bill_type'));
const gridOptions = reactive(getTableConfig());
const data = toRef(gridOptions, 'data');
const loading = toRef(gridOptions, 'loading');

const total = ref(0);

const queryFormRef = ref<ElFormInstance>();

const queryParams = ref<PageQuery>({
  pageNum: 1,
  pageSize: 20,
  type: '',
  status: '',
  startFrom: '',
  endTo: '',
  regionCode: ''
});

const times = computed({
  get: () => {
    return [queryParams.value.startFrom, queryParams.value.endTo]
  },
  set: (v) => {
    queryParams.value.startFrom = v[0];
    queryParams.value.endTo = v[0];
  }
});

/** 查询租户列表 */
const getList = async () => {
  loading.value = true;
  const res = await listMaintenance(queryParams.value);
  data.value = res.rows;
  total.value = res.total;
  loading.value = false;
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

/** 搜索重置操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};
/** 生成工单 */
const handleAdd = async (type: number | string) => {
  console.log(type);
  // proxy?.$modal.msg('功能开发中。。。。。。')

  if (type == '1') proxy?.$tab.openPage('/station/maintenance/maintain/add', '新增维修工单', {});
  else if (type == '2') proxy?.$tab.openPage('/station/maintenance/patrol/add', '新增巡检工单', {});
};
/** 处理 */
const handleDispose = async (row?: BizStationMaintenanceVo) => {
  loading.value = true;
  start(row.maintenanceId)
    .then((res) => {
      loading.value = false;
      if (res.code == 200) {
        ElMessage.success('操作成功');
        getList();
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch(() => {
      loading.value = false;
    });
};
/** 关闭 */
const handleClose = async (row?: BizStationMaintenanceVo) => {
  loading.value = true;
  finish(row.maintenanceId)
    .then((res) => {
      loading.value = false;
      if (res.code == 200) {
        ElMessage.success('操作成功');
        getList();
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch(() => {
      loading.value = false;
    });
};
/** 详情 */
const handleDetail = async (row?: BizStationMaintenanceVo) => {
  let type = row.type;

  if (type == '1') proxy?.$tab.openPage('/station/maintenance/maintain/info', '维修工单详情', { id: row.maintenanceId });
  else if (type == '2') proxy?.$tab.openPage('/station/maintenance/patrol/info', '巡检工单详情', { id: row.maintenanceId });
};

onMounted(() => {
  getList();
});
</script>
